<template>
  <div id="nav">
    <div class="zhong">
      <div class="container">
        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple logo">
              <img src="../assets/logo-orange.png" alt id="logo" />
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light daohang">
              <el-row>
                <el-col :span="16" class="shou">
                  <div class="grid-content bg-purple">
                    <el-menu
                      :default-active="activeIndex2"
                      class="el-menu-demo"
                      mode="horizontal"
                      @select="handleSelect"
                      background-color="#fff"
                      text-color="#000"
                      active-text-color="#E6A23C"
                      text-align="center"
                    >
                      <el-menu-item index="1">
                        <router-link to="/" class="left" exact>首页</router-link>
                      </el-menu-item>
                      <el-menu-item index="2">
                        <router-link to="/menu" class="left" exact>菜谱</router-link>
                      </el-menu-item>
                      <el-menu-item index="3">
                        <router-link to="/community" class="left" exact>美食星球</router-link>
                      </el-menu-item>
                      <el-menu-item index="4">
                        <router-link to="/health" class="left" exact>美食健康</router-link>
                      </el-menu-item>
                      <el-submenu index="5">
                        <template slot="title">
                          <li class="fb left">发布</li>
                        </template>
                        <el-menu-item index="5-1" id="ccai">
                          <router-link to="/pubMenu" class="left" exact>发布菜谱</router-link>
                        </el-menu-item>
                        <el-menu-item index="5-2" id="ccai">
                          <router-link to="/pubNote" class="left" exact>发布笔记</router-link>
                        </el-menu-item>
                      </el-submenu>
                      <el-menu-item index="6">
                        <router-link to="/piao" class="left" exact>漂流瓶</router-link>
                      </el-menu-item>
                    </el-menu>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content bg-purple-light">
                    <div class="search bar7">
                      <form>
                        <input type="text" placeholder="搜索菜谱/食材" name="crid" v-model="homeSearch" />
                        <button type="submit" @click.prevent="search"></button>
                      </form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple denglu">
              <div class="dengbtn" v-show="dengbtn">
                <router-link to="/login" class="deng" active-class="lu">登录</router-link>
                <router-link to="/register" class="deng" active-class="lu">| 注册</router-link>
              </div>
              <router-link to="/personcenter">
                <img
                  :src="'/api/upload/' + getUserInfo[0].userImg"
                  class="touxiang"
                  v-show="touxiang"
                />
              </router-link>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
/* .bg-purple {
    border: 1px solid red;
  }
  .bg-purple-light {
    border: 1px solid green;
  } */
.zhong {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.container {
  background-color: #fff;
}
.el-menu.el-menu--horizontal {
  border-bottom: solid 0px #e6e6e6;
}
.el-menu--horizontal > .el-menu-item {
  font-size: 16px;
  text-align: center;
}
.el-menu--horizontal > .el-menu-item a {
  text-decoration: none;
}
.left {
  float: left;
  /* width: 80px; */
  height: 100%;
}
.el-menu--horizontal > .el-submenu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}
.el-menu-item * {
  color: #000;
  text-decoration: none;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.logo {
  text-align: center;
}
.shou {
  margin-left: 10px;
}
#logo {
  width: 88%;
}
.denglu {
  line-height: 60px;
  text-align: center;
}
.denglu a {
  color: #000;
  text-decoration: none;
}

.deng:hover {
  color: #E6A23C;
}
.lu {
  color: #E6A23C;
}
.touxiang {
  width: 36%;
  height: 50px;
  border-radius: 50%;
}
.fb {
  font-size: 16px;
  text-align: center;
}

div.search {
  padding-top: 17px;
}
form {
  position: relative;
  margin: 0 auto;
}
input,
button {
  border: none;
  outline: none;
}
input {
  width: 100%;
  height: 35px;
  padding-left: 13px;
}
button {
  height: 42px;
  width: 35px;
  cursor: pointer;
  position: absolute;
}
.bar7 form {
  height: 35px;
}
.bar7 input {
  width: 230px;
  border-radius: 42px;
  border: 1px solid #e6a23c;
  background: #fdf9f9;
  transition: 0.3s linear;
  float: right;
}
.bar7 input:focus {
  width: 250px;
}
.bar7 button {
  background: none;
  top: -4px;
  right: 26px;
}
.bar7 button:before {
  content: "Search";
  font-family: FontAwesome;
  color: #e6a23c;
}
// /deep/.el-menu-item:hover{
//   background-color:#e6a23c!important;
//   color: #fff!important;
// }
// /deep/.el-submenu__title:hover{
//   background-color:#e6a23c!important;
//   color: #fff!important;
// }
// /deep/.el-submenu .el-submenu__title .el-menu-item:hover{
//   background-color:#e6a23c!important;
//   color: #fff!important;
// }
</style>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  data() {
    return {
      // elMain: {
      //   background: "rgb(255,255,255,0)"
      // },
      activeIndex: "1",
      activeIndex2: "1",
      getUserInfo: [
        {
          fansNum: "",
          focusNum: "",
          myMenu: "",
          myNote: "",
          pwd: "",
          userId: "",
          userImg: "",
          userName: "",
          userPoint: ""
        }
      ],
      dengbtn: true,
      touxiang: false,
      screenHeight: "",
      homeSearch: ""
    };
  },
  created() {
    //获取用户信息
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        this.getUserInfo = res.data.data;
        console.log("getUserInfo", this.getUserInfo);
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  // mounted() {
  //   window.addEventListener("scroll", this.scrollToTop);
  // },
  watch: {
    getUserInfo(val, newval) {
      console.log("getUserInfo", this.getUserInfo);
      if (this.getUserInfo.length != 0) {
        this.dengbtn = false;
        this.touxiang = true;
      } else {
        this.dengbtn = true;
        this.touxiang = false;
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    search() {
      if (this.homeSearch != "") {
        localStorage["homeSearch"] = this.homeSearch;
        this.$router.push({
          name: "menusearch",
          params: { id: this.homeSearch }
        });
        this.homeSearch = "";
      }
    },
    // scrollToTop() {
    //   var scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   console.log(scrollTop);
    //   if (scrollTop >= 560) {
    //     this.$el.querySelector(".container").style.backgroundColor = "green";
    //     this.$el.querySelector(".el-menu-demo").style.backgroundColor = "green";
    //     this.$el.querySelector(".el-menu-demo").style.textColor = "#000";
    //     this.$el.querySelector(".zhong").style.backgroundColor = "green";
    //   } else {
    //     this.$el.querySelector(".container").style.backgroundColor =
    //       "transparent";
    //     this.$el.querySelector(".el-menu-demo").style.backgroundColor =
    //       "transparent";
    //       this.$el.querySelector(".el-menu-demo").style.textColor = "#fff";
    //     this.$el.querySelector(".zhong").style.backgroundColor = "transparent";
    //   }
    // }
  }
};
</script>